<template>
	<!-- 筛选标签栏 -->
	<view class="tab-bar">
		<view class="tab-item" :class="{ active: currentTab === 'all' }" @click="changeTab('all')">
			全部
		</view>
		<view class="tab-item" :class="{ active: currentTab === 'pendingPayment' }"
			@click="changeTab('pendingPayment')">
			代付款
		</view>
		<view class="tab-item" :class="{ active: currentTab === 'inProgress' }" @click="changeTab('inProgress')">
			进行中
		</view>
		<view class="tab-item" :class="{ active: currentTab === 'completed' }" @click="changeTab('completed')">
			已完成
		</view>
		<view class="tab-item" :class="{ active: currentTab === 'cancelled' }" @click="changeTab('cancelled')">
			已取消
		</view>
	</view>
	<view class="container">
		<!-- 内容区域 -->
		<view class="content">
			<!-- v-if="isEmpty" -->
			<view class="empty">
				<image src="/static/empty-icon.png" mode="widthFix"></image>
				<text>暂无数据，如有问题，请联系客服</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'all',
				isEmpty: true
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			showFilter() {
				// 显示筛选弹窗或进行筛选操作
			},
			changeTab(tab) {
				this.currentTab = tab;
				// 根据tab的值加载相应的送货记录数据，这里模拟数据加载后设置isEmpty为false
				setTimeout(() => {
					this.isEmpty = false;
				}, 1000);
			}
		}
	};
</script>

<style lang="scss">
	.tab-bar {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		position: static;
		top: 0;

		.tab-item {
			width: 97rpx;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #666666;

			&.active {
				color: #3399ff;
				border-bottom: 6rpx solid #3399ff;
				font-size: 30rpx;
			}
		}
	}

	.container {
		background-color: #f5f5f5;
		height: 100vh;

		.content {
			flex: 1;
			padding: 20rpx;

			.empty {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				image {
					width: 200rpx;
					margin-bottom: 20rpx;
				}

				text {
					font-size: 24rpx;
				}
			}
		}
	}
</style>